<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">网站设置</div>
                <div class="layui-card-body" pad15>
                    <div class="layui-form" wid100 lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">LOGO</label>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline" style="width: 200px;">
                                    <img id="employeeIcon" src="/download/icon.jpg" width="143px" height="49px">
                                </div>
                            </div>
                            <div class="layui-form-mid layui-word-aux">图片大小不超过1MB&nbsp;&nbsp;&nbsp;&nbsp;
                                <button type="button" class="layui-btn layui-btn-sm" id="uploadLOGO">
                                    <i class="layui-icon">&#xe67c;</i>上传LOGO
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">域名</label>
                            <div class="layui-input-block">
                                <input id="domain" class="layui-input" lay-verify="required" value="华悦假日酒店"
                                       placeholder="请输入域名">
                            </div>
                            <div class="layui-form-mid layui-word-aux">涉及API回调,请认真填写 tips:www.baidu.com
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">酒店名称</label>
                            <div class="layui-input-block">
                                <input id="hotelName" class="layui-input" lay-verify="required" value="华悦假日酒店"
                                       placeholder="请输入酒店名称" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-block">
                                <input class="layui-input" id="hotelPhone" lay-verify="required" placeholder="固话/手机号">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-block">
                                <input class="layui-input" id="hotelAddress" lay-verify="required" placeholder="酒店地址">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">坐标：</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="hotelMarker" lay-verify="required"
                                       placeholder="请输入复制的坐标">
                            </div>
                            <div class="layui-form-mid layui-word-aux">提示：坐标中间用“,”隔开
                                <input type="button" class="layui-btn layui-btn-sm" value="点我拾取坐标"
                                       onclick="window.open('https://lbs.amap.com/console/show/picker')"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标语</label>
                            <div class="layui-input-block">
                                <input class="layui-input" id="hotelIntroShort" lay-verify="required"
                                       placeholder="10字-20字">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">短介绍</label>
                            <div class="layui-input-block">
                                <input class="layui-input" id="hotelIntroLong" lay-verify="required"
                                       placeholder="20字-50字">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">关于我们</label>
                            <div class="layui-input-block">
                                <textarea id="about" class="layui-textarea" lay-verify="required"
                                          placeholder="50字-200字"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">最大文件上传</label>
                            <div class="layui-input-inline" style="width: 80px;">
                                <input class="layui-input" id="uploadSize" lay-verify="required|number">
                            </div>
                            <div class="layui-input-inline layui-input-company">KB</div>
                            <div class="layui-form-mid layui-word-aux">提示：1 M = 1024 KB</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="employee-submit">确认保存</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../layuiadmin/layui/layui.js"></script>
<script src="../../../js/jquery-1.8.3.min.js"></script>
<script>
    $.ajax({
        url: '/webInfo/findOne',
        type: 'get',
        dataType: 'json',
        async: false,//设置阻断
        success: function (data) {
            // console.log(data);
            $("#hotelName").val(data.data.hotel_name);
            $("#hotelIntroShort").val(data.data.hotel_intro_short);
            $("#hotelIntroLong").val(data.data.hotel_intro_long);
            $("#hotelMarker").val(data.data.hotel_marker);
            $("#hotelPhone").val(data.data.hotel_phone);
            $("#hotelAddress").val(data.data.hotel_address);
            $("#domain").val(data.data.domain);
            $("#about").val(data.data.about);
            $("#uploadSize").val(data.data.uploadSize);
            if (data.data.icon != null) {
                $("#employeeIcon").attr("src", "/download/" + data.data.icon);
            }
            //重新渲染表单元素
            layui.use('form', function () {
                var form = layui.form;
                form.render();
            });
        }
    })


    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'layer', 'upload'], function () {
        var $ = layui.$
            , form = layui.form
            , layer = layui.layer
            , upload = layui.upload;
        //初始化文件上传组件
        var load;
        var uploadInst = upload.render({
            elem: '#uploadLOGO' //绑定元素
            , accept: 'images'
            , acceptMime: 'image/*'
            , method: 'post'
            , size: 1024
            , url: '/webInfo/uploadIcon' //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                //上传loading
                load = layer.load(1, {
                    shade: [0.3, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index, upload) {
                layer.close(load);
                layer.msg(res.msg, {icon: res.icon, shade: 0.3, time: 1500}, function (index) {
                    location.reload();
                });

            }
            , error: function () {
                layer.msg("上传失败!")
                layer.close(load);
            }
        });
        //监听提交
        form.on('submit(employee-submit)', function (data) {
            //上传loading
            load = layer.load(1, {
                shade: [0.3, '#fff'] //0.1透明度的白色背景
            });
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                url: "/webInfo/update",
                type: 'post',
                dataType: 'json',
                data: {
                    "hotelName": $("#hotelName").val(),
                    "hotelIntroShort": $("#hotelIntroShort").val(),
                    "hotelIntroLong": $("#hotelIntroLong").val(),
                    "hotelMarker": $("#hotelMarker").val(),
                    "hotelPhone": $("#hotelPhone").val(),
                    "hotelAddress": $("#hotelAddress").val(),
                    "about": $("#about").val(),
                    "uploadSize": $("#uploadSize").val(),
                    "domain": $("#domain").val()
                },
                success: function (data) {
                    layer.close(load);
                    location.reload();
                    layer.msg(data.msg, {icon: data.icon, zIndex: layer.zIndex + 100});
                }
            });
        });
    });
</script>
</body>
</html>